<template>
	<div class="main">
		<h3 class="title">{{ agreement.title }}</h3>
		<article class="article-content ql-editor" v-html="agreement.content"></article>
	</div>
</template>

<script setup>
const agreement = ref("")

async function getData() {
	const res = await getAxios(`/api/api/system/protocol/getByCode?code=USER`)
	agreement.value = res
}
getData()
</script>

<style lang="scss" scoped>
.main {
	height: 100%;
	overflow: scroll;
}
h3.title {
	text-align: center;
	font-size: 30px;
	padding-top: 60px;
	padding-bottom: 35px;
}
.subtitle {
	background: var(--subpage-background-color);
	text-align: center;
	color: #9c9d9c;
	font-size: 16px;
	padding-top: 20px;
	padding-bottom: 30px;
	line-height: 2.3;
	span {
		padding-inline: 15px;
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
		vertical-align: top;
		img {
			width: 18px;
			margin-right: 5px;
		}
		&.collect {
			cursor: pointer;
			.active {
				color: var(--primary);
			}
		}
	}
	.tags {
		display: inline-block;
		border: 1px solid #d3d3d3;
		background: #fff;
		color: var(--primary);
		font-size: 14px;
		padding: 0 12px;
		border-radius: 3px;
		margin-inline: 5px;
		line-height: 1.8;
	}
}
.article-content {
	padding: 40px 5vw 60px 5vw;
	font-size: 20px;
	line-height: 1.8;
}
.article-footer {
	padding-block: 20px;
	font-size: 20px;
	line-height: 2;
	.title {
		display: inline-block;
		font-weight: 700;
		margin-right: 7px;
	}
	.message {
		display: inline-block;
	}
}
.comments-title {
	font-size: 26px;
	padding-top: 15px;
}
.textarea {
	--el-fill-color-blank: transparent;

	position: relative;
	margin-bottom: 40px;
	.el-button {
		position: absolute;
		z-index: 2;
		bottom: 10px;
		right: 10px;
	}
}
</style>
